<template>
	<view class="cidPjd">
		<view class="" style="flex: 1;">
			<view class="cidPjdMain">
				<view class="cidPjdMainHead">
					<view class="cidPjdMainHeadLeft">
						<view class="cidPjdMainHeadLeft-title">
							<image class="cidPjdMainHeadLeft-titleImg"
								src="https://www.zzzsyh.com/applets/agent/agent/house-three.png" mode="">
							</image>
							<text class="cidPjdMainHeadLeft-titleTxt font_blod">{{dat.storeName}}</text>
						</view>
						<view class="cidPjdMainHeadLeft-fuwu">
							<view class="cidPjdMainHeadLeft-fuwuLeft">
								服务承诺：
							</view>
							<view class="cidPjdMainHeadLeft-fuwuRight">
								<text class="cidPjdMainHeadLeft-fuwuRight-txt" v-for="(item, index) of storeService"
									:key="index">
									{{item}}
								</text>
							</view>
						</view>
						<view class="cidPjdMainHeadLeft-liulan">
							<view class="cidPjdMainHeadLeft-liulanLeft">
								浏览量：
							</view>
							<view class="cidPjdMainHeadLeft-liulanRight">
								{{dat.storePageviews}}
							</view>
						</view>
					</view>
					<view class="cidPjdMainHeadRight">
						<image class="cidPjdMainHeadRight-img" @click="previewImage(dat.storeImage, index)"
							:src=dat.storeImage mode=""></image>
					</view>
				</view>
				<view class="cidPjdMainAddress">
					<image class="cidPjdMainAddress-img" src="https://www.zzzsyh.com/applets/agent/agent/address-3.png"
						mode=""></image>
					<view class="cidPjdMainAddress-txt">
						{{dat.storeDetailAddress}}
					</view>
				</view>
				<view class="cidPjdMainTitle font_blod">
					店铺信息
				</view>
				<view class="cidPjdMainList">
					<view class="cidPjdMainLi">
						<image class="cidPjdMainLi-img" src="https://www.zzzsyh.com/applets/agent/agent/pjd_1.png"
							mode="">
						</image>
						<view class="cidPjdMainLi-txt font_blod">
							{{dat.storePerson}}
						</view>
					</view>
					<view class="cidPjdMainLi">
						<image class="cidPjdMainLi-img" src="https://www.zzzsyh.com/applets/agent/agent/pjd_2.png"
							mode="">
						</image>
						<view class="cidPjdMainLi-txt font_blod">
							{{dat.storePhone}}
						</view>
					</view>
					<view class="cidPjdMainLi">
						<image class="cidPjdMainLi-img" src="https://www.zzzsyh.com/applets/agent/agent/pjd_3.png"
							mode="">
						</image>
						<view class="cidPjdMainLi-txt font_blod">
							{{dat.storeBusinessHours}}
						</view>
					</view>
					<view class="cidPjdMainLi">
						<image class="cidPjdMainLi-img" src="https://www.zzzsyh.com/applets/agent/agent/pjd_4.png"
							mode="">
						</image>
						<view class="cidPjdMainLi-txt font_blod">
							{{dat.storeProvinceName}} {{dat.storeCityName}} {{dat.storeDistrictName}}
						</view>
					</view>
					<!-- <view class="cidPjdMainLi">
					<image class="cidPjdMainLi-img" src="https://www.zzzsyh.com/applets/agent/agent/pjd_5.png" mode=""></image>
					<view class="cidPjdMainLi-txt">
						{{dat.storeOpenYears}}
					</view>
				</view> -->
					<view class="cidPjdMainLi">
						<image class="cidPjdMainLi-img" src="https://www.zzzsyh.com/applets/agent/agent/pjd_6.png"
							mode="">
						</image>
						<view class="cidPjdMainLi-txt">
							<!-- <text class="cidPjdMainLi-txtBox" v-for="(item, index) of storeContent" :key="index">{{item}}</text> -->
							<text class="cidPjdMainLi-txtBox">
								{{dat.storeContent}}
							</text>
						</view>
					</view>
					<view class="cidPjdMainLi">
						<image class="cidPjdMainLi-img" src="https://www.zzzsyh.com/applets/agent/agent/pjd_7.png"
							mode="">
						</image>
						<view class="cidPjdMainLi-txt">
							<text class="font_blod">专属小程序码</text>
							<image class="cidPjdMainLi-txtImg"
								src="https://www.zzzsyh.com/applets/agent/agent/right_six.png" mode=""></image>
						</view>
					</view>
				</view>

			</view>
			<view class="cidZs">
				注：若要进行匹配产品鉴定权，请先开启产品鉴定权按钮！
			</view>
			<view class="mainJDQ">
				<view class="cidPjdMainLi mainJDQLi">
					<image class="cidPjdMainLi-img" src="https://www.zzzsyh.com/applets/agent/agent/pjd_8.png" mode="">
					</image>
					<view class="cidPjdMainLi-txt font_blod">
						产品鉴定权
					</view>
					<view class="" style="transform:scale(0.6)">
						<switch :checked="switchChecked" @change="switch1Change" />
					</view>
				</view>
			</view>
		</view>
		<view class="btnB">
			<!-- <view class="" >
				<view class="btnBoxTwo font_blod" v-if="dat.isAppraisal == 1" @click="cli_subside">
					匹配鉴定权
				</view>
				<view class="btnBoxTwo font_blod btnBoxRightNone" @click="cli_subside_no" v-else>
					匹配鉴定权
				</view>
			</view> -->

			<view class="btnBox">
				<view class="">
					<view class="btnBoxLeftNo font_blod" v-if="dat.isRaker == 1" @click="cli_detail_up_no">
						取消升级市县
					</view>
					<view v-if="dat.isRaker == 0" class="btnBoxLeft font_blod" @click="cli_detail_up">
						升级市县
					</view>
				</view>
				<view class="">
					<view v-if="dat.isAppraisal == 1" class="btnBoxRight font_blod" @click="cli_subside">
						匹配产品鉴定权
					</view>
					<view class="btnBoxRight btnBoxRightNone font_blod" v-else>
						匹配产品鉴定权
					</view>
				</view>

			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popBox">
				<view class="popBoxClose" @click="cli_popClose">
					<image class="popBoxCloseImg" src="https://www.zzzsyh.com/applets/agent/agent/close_three.png"
						mode=""></image>
				</view>
				<view class="popBoxLogo">
					<image class="popBoxLogoImg" src="https://www.zzzsyh.com/applets/agent/agent/28.png" mode="">
					</image>
				</view>
				<view class="popBoxTitle font_blod">
					温馨提示
				</view>
				<view class="popBoxCon">
					{{popCon}}
				</view>
				<view class="popBoxBtn font_blod" @click="cli_popClose">
					我知道了
				</view>
			</view>
		</uni-popup>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message type="error" message="若要进行匹配鉴定权，请先打开产品鉴定权！" :duration="4000">
				<view class="cisaBar">
					<image class="cisaBarImg" src="https://www.zzzsyh.com/applets/agent/agent/bar.png" mode=""></image>
					<text class="cisaBarTxt font_blod">
						若要进行匹配鉴定权，请先打开产品鉴定权！
					</text>
				</view>
			</uni-popup-message>
		</uni-popup>
		<uni-popup ref="cityCancel" type="center">
			<view class="cityCancel">
				<view class="cityCancelTop">
					确定取消升级市县？
				</view>
				<view class="cityCancelCon">
					<view class="cityCancelConBoxLeft" @click="cli_close_cityCancel">
						取消
					</view>
					<view class="cityCancelConBoxRight" @click="cli_ok_cityCancel">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	export default {
		data() {
			return {
				id: '',
				switchChecked: false,
				dat: {
					storeName: '',
				},
				popCon: ''
			}
		},
		onLoad(val) {
			this.id = val.id
		},
		mounted() {
			this.getPartsStoreDetails()

		},
		computed: {
			storeService() {
				try {
					return this.dat.storeService.split(',').slice(0, 3)
				} catch (e) {
					return []
				}
				// if () {
				// }
			},
		},
		methods: {

			// 打开匹配鉴定全提示弹窗
			cli_subside_no() {
				console.log(11);
				this.$refs.message.open()
			},
			// 点击关闭弹窗
			cli_popClose() {
				this.$refs.popup.close()
			},
			// 图片预览
			previewImage(item, index) {
				console.log(item);
				let lis = item.split()
				wx.previewImage({
					current: 0, // 当前显示图片的http链接
					urls: lis // 需要预览的图片http链接列表
				})
			},
			// 改变鉴定权开关
			switch1Change(e) {
				console.log(e);
				let idd = this.dat.id
				let val = e.detail.value
				if (val) {
					this.popCon = '开启鉴定权之后该店铺将继续拥有匹配过的产品鉴定权，也可以重新调整店铺的鉴定权。'
					this.updateIsAppraisal(idd, 1)
				} else {
					this.popCon = '关闭鉴定权之后该店铺将不能进行所有产品的相关鉴定。'
					this.updateIsAppraisal(idd, 0)
				}
				this.$refs.popup.open()
			},
			// 升级市县
			cli_detail_up() {
				let id = this.dat.id
				uni.navigateTo({
					url: '/pages/centerInviteUpCity/centerInviteUpCity?id=' + id
				})
			},
			// 取消升级市县
			cli_detail_up_no() {
				this.$refs.cityCancel.open()
			},
			// 取消升级市县
			cli_close_cityCancel() {
				this.$refs.cityCancel.close()
			},
			cli_ok_cityCancel() {
				this.cancelCityPartsStore()
			},
			cancelCityPartsStore() {
				let _that = this
				uni.request({
					url: allapi.cancelCityPartsStore,
					data: {
						id: _that.id
					},
					success: (res) => {
						console.log(res);
						_that.getPartsStoreDetails()
						this.$refs.cityCancel.close()
					}
				})
			},
			// 匹配哦鉴定全
			cli_subside() {
				let id = this.dat.id
				uni.navigateTo({
					url: '/pages/centerInviteSubsideAuthenticate/centerInviteSubsideAuthenticate?id=' + id
				})
			},
			// 修改鉴定权限
			updateIsAppraisal(id, isAppraisal) {
				uni.request({
					url: allapi.updateIsAppraisal,
					data: {
						id: id,
						isAppraisal: isAppraisal
					},
					success: (res) => {
						console.log(res);
						this.getPartsStoreDetails()
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取详情
			getPartsStoreDetails() {
				uni.request({
					url: allapi.getPartsStoreDetails,
					data: {
						id: this.id
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.dat = dat
						if (dat && dat.isAppraisal == 1) {
							this.switchChecked = true
						} else {
							this.switchChecked = false
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.cidPjd {
		background: linear-gradient(180deg, #FDD194 0%, #F6F6F6 100%);
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}

	.cidPjdMain {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 25rpx 32rpx;
	}

	.cidPjdMainHead {
		display: flex;
		justify-content: space-between;
	}

	.cidPjdMainHeadLeft {
		flex: 1;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
	}

	.cidPjdMainHeadLeft-title {
		display: flex;
	}

	.cidPjdMainHeadLeft-titleImg {
		width: 42rpx;
		height: 42rpx;

	}

	.cidPjdMainHeadLeft-titleTxt {
		margin-left: 16rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.cidPjdMainHeadLeft-fuwu {
		display: flex;
		align-items: center;
		margin-top: 14rpx;
	}

	.cidPjdMainHeadLeft-fuwuLeft {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		width: 120rpx;
	}

	.cidPjdMainHeadLeft-fuwuRight {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.cidPjdMainHeadLeft-fuwuRight-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #EF691C;
		padding: 6rpx 8rpx;
		line-height: 34rpx;
		margin-left: 8rpx;
		background: #FEEFEA;
		border-radius: 8rpx;
	}

	.cidPjdMainHeadLeft-liulan {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
	}

	.cidPjdMainHeadLeft-liulanLeft {
		font-size: 24rpx;
		color: #666666;
		line-height: 34rpx;
	}

	.cidPjdMainHeadLeft-liulanRight {
		font-size: 24rpx;
		color: #000000;
		line-height: 34rpx;
	}

	.cidPjdMainHeadRight {
		display: flex;
		flex-direction: column;
	}

	.cidPjdMainHeadRight-img {
		width: 144rpx;
		height: 144rpx;
		border-radius: 8rpx;
		background: #EEEEEE;
	}

	.cidPjdMainHeadRight-li {
		font-size: 20rpx;
		color: #999999;
		font-weight: 400;
		line-height: 28rpx;
		margin-top: 8rpx;
		text-align: center;
	}

	.cidPjdMainAddress {
		background: #F3F5F6;
		border-radius: 16rpx;
		padding: 26rpx 24rpx;
		display: flex;
		align-items: center;
		margin-top: 14rpx;
	}

	.cidPjdMainAddress-img {
		width: 32rpx;
		height: 32rpx;
	}

	.cidPjdMainAddress-txt {
		margin: 0 24rpx;
		flex: 1;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.cidPjdMainTitle {
		line-height: 50rpx;
		color: #333333;
		font-size: 36rpx;
		margin-top: 20rpx;
	}

	.cidPjdMainList {
		margin-top: 24rpx;
	}

	.cidPjdMainLi {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
	}

	.cidPjdMainLi-img {
		width: 36rpx;
		height: 36rpx;
	}

	.cidPjdMainLi-txt {
		flex: 1;
		margin: 0 30rpx;
		color: #333333;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.cidPjdMainLi-txtBox {
		padding: 6rpx 8rpx;
		background: #F3F5F6;
		border-radius: 8rpx;
		line-height: 34rpx;
		display: block;
		margin-right: 10rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.cidPjdMainLi-txtImg {
		width: 28rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}

	.mainJDQ {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 40rpx 32rpx;
	}

	.mainJDQLi {
		margin-top: 0;
		height: 40rpx;
	}

	.btnB {
		/* position: fixed; */
		width: 100%;
		bottom: 0;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}

	.btnBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* margin: 166rpx 48rpx 48rpx 48rpx; */
		margin: 0 48rpx;
	}

	.btnBoxTwo {
		margin: 0 40rpx;
		/* margin-top: 226rpx; */
		height: 96rpx;
		line-height: 96rpx;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 46rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.btnBoxLeft {
		width: 256rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #F8BA70 0%, #FB862F 100%);
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 96rpx;
	}

	.btnBoxLeftNo {
		width: 256rpx;
		height: 96rpx;
		background: #FFF3E9;
		border-radius: 48rpx;
		color: #F67F18;
		border: 2rpx solid #F67F18;
		text-align: center;
		line-height: 96rpx;
	}

	.btnBoxRight {
		width: 256rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 96rpx;
	}

	.btnBoxRightNone {
		opacity: 0.5;
	}

	.popBox {
		width: 472rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 32rpx 64rpx 48rpx 64rpx;
		text-align: center;
		position: relative;
	}

	.popBoxClose {
		position: absolute;
		right: 24rpx;
		top: 24rpx;
	}

	.popBoxCloseImg {
		/* background: red; */
		width: 32rpx;
		height: 32rpx;
	}

	.popBoxLogo {
		width: 160rpx;
		height: 134rpx;
		/* background: red; */
		margin-top: 32rpx;
	}

	.popBoxLogoImg {
		width: 160rpx;
		height: 134rpx;
	}

	.popBoxTitle {
		font-size: 34rpx;
		color: #353535;
		line-height: 48rpx;
		margin-top: 8rpx;
	}

	.popBoxCon {
		font-size: 28rpx;
		color: #666666;
		line-height: 40rpx;
		margin-top: 32rpx;
	}

	.popBoxBtn {
		width: 208rpx;
		height: 72rpx;
		background: linear-gradient(180deg, #F27E75 0%, #E22F48 100%);
		border-radius: 36rpx;
		line-height: 72rpx;
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 48rpx;
	}

	.cisaBar {
		height: 72rpx;
		background: #FFF3DD;
		display: flex;
		align-items: center;
	}

	.cisaBarImg {
		width: 58rpx;
		height: 58rpx;
		margin-left: 32rpx;
	}

	.cisaBarTxt {
		font-size: 28rpx;
		color: #FF9E02;
		margin-left: 18rpx;
	}

	.cityCancel {
		width: 534rpx;
		height: 296rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.cityCancelTop {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 184rpx;
		border-bottom: 1rpx solid #EEEEEE;
		color: #353535;
		font-size: 34rpx;
		font-weight: bold;
	}

	.cityCancelCon {
		height: 110rpx;
		display: flex;
	}

	.cityCancelConBoxLeft {
		width: 268rpx;
		border-right: 1rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
		font-size: 34rpx;
		font-weight: bold;
		letter-spacing: 1rpx;
	}

	.cityCancelConBoxRight {
		letter-spacing: 1rpx;
		color: #58D26F;
		font-size: 34rpx;
		width: 264rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.cidZs {
		margin: 12rpx 24rpx;
		color: #CC302D;
		line-height: 40rpx;
		font-size: 28rpx;
	}
</style>
